<template lang="html">
    <div class="material">
        <p class="musictitle">音乐库</p>
        <div v-for="(item,index) in MaterialData" :key="index">
            <img :src="item.imgUrl"/>
            <p>{{ item.title }}</p>
        </div>
    </div>
</template>

<script>
export default {
    name:"material",
    data(){
        return{
            MaterialData:[]
        }
    },
    mounted(){
        this.$axios.get(this.HOST + "http://localhost:3000/burning/music")
        .then(res => {
            this.MaterialData = res.data
        })
        .catch(error => {
            console.loh(error)
        })
    }
}
</script>

<style lang="less">
 .musictitle{
     font-size: 0.4rem;
     padding-top:20px;
     box-sizing: border-box;
     padding-left: 10px;
 }
.material{
    background: #fff;
    width: 100%;
    div{
        float: left;
        width: 50%;
        background: #fff;
        padding-left: 0.55rem;
        padding-top: 0.46rem;
        box-sizing: border-box;
        img{
            width: 80%;
        }
        p{
            font-size: 0.3rem;
        }
    }
}

</style>
